<template>
  <div>
    <Head></Head>
      <label style="font-size:24px;color:red">退货服务</label>
       <div style="margin-left:70%"><el-tag type="danger" style="color:red">退货须知：按规定可在购买七天内申请退货</el-tag></div>
      <br>
      <div style="margin-left:80%"><el-button @click="goto()">我的退货</el-button></div>
 <el-table
    ref="multipleTable"
    :data="snapshotList"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="snapshotSerial"
      label="商品编号"
      width="250" >
    </el-table-column>
    <el-table-column
      prop="snapshotName"
      label="商品名"
      width="250">
    </el-table-column>
    <el-table-column
      prop="snapshotPrice"
      label="价格"
      width="250">
    </el-table-column>
    <el-table-column
      label="商品状态"
      width="150">
           <template slot-scope="scope">
                        {{ scope.row.snapshotStatus == 1 ? '已出售' 
                        : '已退货'
                         }}
           </template>
    </el-table-column>
    <el-table-column
      prop="snapshotNum"
      label="数量"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
  <div style="margin-left:80%">
    <span>总价:</span><span style="color:red">{{returnThing.returnPrice}}</span>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
   <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
  <div style="margin-left:20%">
    <div>退货说明:</div>
  <textarea name="" id="" cols="100" rows="10" v-model="returnThing.returnReason"></textarea>
  </div>
  
   <div style="margin-left:80%"><el-button  @click="del()">确认退货</el-button></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import {mapActions} from 'vuex'
import Head from "../cart/head"
export default {
   components: {
     Head,
  },
  computed:{
      ...mapState("Return",["snapshotList","orderId","orderSerial"]),
      ...mapState("cart", ["user"])
    },
    data(){
        return{
            multipleSelection:[],
            returnThing:{
                userId:0,
                list:{},
                returnReason:null,
                returnPrice:0,
                returnStatus:0,
                orderSerial:'',
                returnSerial:'',
                orderId:0,
            },
            num:0,
            
        }
    },
    created(){
       this.returnThing.userId=this.user.userId;
      this.returnThing.orderSerial=this.orderSerial;
       this.returnThing.orderId=this.orderId;
       console.log(this.returnThing);
      this.getOrder(this.returnThing.orderId);
    },
    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val){
        if(val.length==0){
           this.returnThing.returnPrice=0;
        }
        this.multipleSelection = val;
        //  console.log(val);
        var index =val.length;
        for(var i=0;i<index;i++){
          if(i==0){
            this.returnThing.list={};
              this.returnThing.returnPrice=0;
              this.num=0;
          }
          var a=val[i];
          if(a.snapshotStatus==1){
          var snapshotId=a.snapshotId;
         var b= this.returnThing.list;
         b[i]=snapshotId;
           var nums=a.snapshotNum;
           this.num=this.num+nums;
          //  console.log(this.num);
           var money=a.snapshotPrice;
           this.returnThing.returnPrice=this.returnThing.returnPrice+nums*money;
          //  console.log(this.returnThing.returnPrice);
          }
        }
      },
      del(){
          // this.returnThing.userId=1;
          // console.log(this.returnThing);
          //  该处调用mq，向审核发送信息
          // console.log(this.returnThing);
          if(this.returnThing.returnPrice!=0){
            if(this.returnThing.returnReason!=null){
               this.add(this.returnThing);
           this.$router.push("/myReturn"); //跳转到MyReturn界面
            }else{
              alert("请说明退货理由！");
            }
          }else{
            alert("未选择退货商品，请重新选择");
          }
           
      },
      goto(){
        this.$router.push("/myReturn");  //跳转到MyReturn界面
      },
      ...mapActions("Return",["getOrder","add"])
}
}
</script>

<style>

</style>